<template>
	<view class="getphone">
		<view style="height: 160rpx;"></view>
		<view class="tit">一起去拼购</view>
		<view class="block">
			<text>邀请码：</text>
			<input type="text" v-model="invitation_code" class="invitation_code" placeholder="请输入6位邀请码" />
		</view>

		<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>
	</view>
</template>

<script>
	import {
		register
	} from "@/api/login"
	import {
		mapState,
		map
	} from 'vuex'
	export default {
		data() {
			return {
				invitation_code: ""
			}
		},
		computed: {
			...mapState(['openid', 'wxuserinfo', 'share_invitation_code', 'unionid'])
		},
		methods: {
			getPhoneNumber(e) {
				let detail = e.detail
				// encryptedData   包括敏感数据在内的完整用户信息的加密数据
				// errMsg    "getPhoneNumber:ok"
				// iv 加密算法的初始向量
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					// 用户点击允许
					// nickname  avatarUrl   gender
					this.$store.commit('setShareInvitationCode', this.invitation_code);
					let data = {
						invitation_code: this.share_invitation_code,
						openid: this.openid,
						unionid: this.unionid,
						encryptedData: detail.encryptedData,
						iv: detail.iv,
						wxInfo: {
							nickname: this.wxuserinfo.nickName,
							headimgurl: this.wxuserinfo.avatarUrl,
							sex: this.wxuserinfo.gender
						},
					}
					register(data).then(res => {
						this.$store.commit('setwxuserinfo', res.data.userInfo);
						this.$store.commit("setToken", res.data.token)
						this.$store.commit('setHasRegister', true);
						this.$Toast.none("注册成功")
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/home/index"
							})
						}, 500)
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.getphone {
		width: 100%;
		height: auto;
	}

	.tit {
		margin: 0 auto;
		text-align: center;
		font-size: 32rpx;
	}

	.block {
		margin: 60rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.invitation_code {
		border-bottom: 1rpx solid black;
	}

	.btn {
		margin: 80rpx auto 0;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #FD4048 0%, #FC4655 100%);
		color: white;
		font-size: 32rpx;
		border-radius: 80rpx;
	}
</style>
